<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开户账户信息</title>
    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="angularjs/pagination.css">

    <link rel="stylesheet" href="layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>

    <!--<script src="//unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>-->
    <!--6.引入AngularJS分布的JS框架-->
    <script src="angularjs/pagination.js"></script>

    <script src="layer/layer.js"></script>
    <!--验证码js-->
    <script src="js/mycode.js" ></script>
    
    <script>
        layerindex=-1;
        var app = angular.module("bank", []);
        app.controller("regCardController", function ($scope, $http, $window) {
            //状态码
            var status = 0;

            $http.post('http://localhost:12000/tran/ip').then(function (data) {  //正确请求成功时处理
                console.log(data)
                if (data.data.code == 403) {
                    window.location.href = "/login.html";
                }
            }).catch(function (result) { //捕捉错误处理
                console.info(result);
            });

            $scope.TUser = {
                user_name : "",
                uk_phone : ""
            }

            //校验数据项 默认值
            $scope.checkData = {
                "nameCheck": "m",
                "phoneCheck": "m",
                "passwordCheck": "m",
                "passwordsCheck": "m",
                "CAPTCHA": "m"
            };

            // 证件类型
            $scope.certificateTypes = [
                {type: "请选择", value: "-1"},
                {type: "身份证", value: "1"},
                {type: "护照", value: "0"},
                {type: "港澳通行证", value: "2"}
            ];

            //下一步，跳转到下一个页面
            $scope.next = function() {
                $http.post("http://127.0.0.1:12000/open/card/checkCode?number=" + $scope.number +
                    "&code=" + $scope.phoneCAPTCHA + "&telephone=" + $scope.TUser.uk_phone + "&password=" + $scope.againPassword).then(function (data) {
                    console.log(data)
                        if (data.data.code==200) {
                        layer.close(layerindex);
                        layer.msg(data.data.msg,{icon:6,title:"系统提示："});
                        console.log("开户成功");
                        alert(data.data.msg);
                        window.location.href='/index.html';
                        status = 1;
                    } else {
                        layer.close(layerindex);
                        layer.msg(data.data.msg,{icon:6,title:"系统提示："});
                        console.log("开户失败");
                        alert(data.data.msg);
                        status = 0;
                    }
                })
            };



            //校验姓名
            $scope.checkName = function () {
                var username = $scope.TUser.user_name;
                if (username) {
                    var reg = /^[\u4E00-\u9FA5]{2,5}$/;//姓名正则
                    if (reg.test(username)) {
                        $scope.checkData.nameCheck = "r";   //正确
                        return true;
                    } else {
                        $scope.checkData.nameCheck = "e";   //格式错误
                    }
                } else {
                    $scope.checkData.nameCheck = "m";
                    return false;   //可以为空
                }
            };

            //校验手机号
            $scope.checkPhone = function () {
                var userPhone = $scope.TUser.uk_phone;
                //alert(userPhone)
                if (userPhone) {
                    var reg = /^1[3|4|5|7|8][0-9]{9}$/;//姓名正则
                    if (reg.test(userPhone)) {
                        $scope.checkData.phoneCheck = "r";   //正确
                        return true;
                    } else {
                        $scope.checkData.phoneCheck = "e";   //格式错误
                    }
                } else {
                    $scope.checkData.phoneCheck = "m";
                    return false;   //可以为空
                }
            };

            // 验证码
            $scope.showCAPTCHA = function () {
                var show_num = [];
                draw(show_num);
                $("#canvas").on('click',function(){
                    draw(show_num);
                });
                $("#yzm").change(function () {
                    var val = $("#yzm").val().toLowerCase();

                    var num = show_num.join("");
                    if (val == '') {
                        alert('请输入验证码！');
                    } else if (val == num) {
                        $("#yzm").css("border", "1px green solid");
                        $("#yzm").blur();
                        $("#submit").attr("disabled",false);
                        //$(".input-val").val('');
                        // draw(show_num);
                        return true;
                    } else {
                        $("#yzm").css("border", "2px red solid");
                        $(".input-val").val('');
                        $("#submit").attr("disabled",true);
                        $("#yzm").focus();
                        // draw(show_num);
                        return false;
                    }

                });
            };

            $scope.check = function () {
                if ($scope.firstPassword != $scope.againPassword) {
                    $scope.firstPassword = "";
                    $scope.againPassword = "";
                    alert("两次密码不一致");
                }
            };

            $scope.isDisable = false;
            $scope.text = "获取验证码";
            $scope.getCode = function () {
                $http.post("http://127.0.0.1:12000/open/card/sendNew?mobile="+$scope.TUser.uk_phone).then(function (data) {
                    console.log("data="+data);
                    if (data = "success") {
                        alert("成功发送！");
                        $scope.n = 60;
                        $scope.text = $scope.n + "秒后再点击";
                        $scope.isDisable = true;

                        var time = setInterval(function () {
                            console.log("hello");
                            $scope.n--;
                            $scope.$apply(function(){
                                $scope.text = $scope.n + "秒后再点击";
                            });
                            console.log($scope.n);
                            if ($scope.n == 0)
                            {
                                $scope.$apply(function(){
                                    $scope.isDisable = false;
                                    $scope.text = "获取验证码";
                                });
                                clearInterval(time);
                            }

                        },1000);
                    } else {
                        alert("服务器繁忙，请重新发送");
                    }
                })
            };



        });
    </script>
</head>
<body ng-app="bank" ng-controller="regCardController" ng-init="getCertificateType()">
<div>
    <ol class="breadcrumb" style="margin-top: 0px;margin-bottom: 0;">
        <li><a >Home</a></li>
        <li><a >银行</a></li>
        <li><a href="/index.html">返回首页</a></li>
    </ol>
</div>
<div class="container">
    <div class="panel-primary">

        <div class="panel-heading">
            <h1>深圳知领银行</h1>
        </div>

        <div class="panel-body">
            <form class="form-horizontal">
                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>办理人姓名：
                    </label>
                    <div class="col-md-9">
                        <input type="text" class="form-control"
                               ng-model="TUser.user_name" ng-blur="checkName()"
                               placeholder="请输入2~5个汉字"/>
                    </div>
                    <span ng-if="checkData.nameCheck=='e'" style="color: red" class="col-md-offset-6">请输入2~5个汉字</span>
                </div>
                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>证件类型：
                    </label>
                    <!--<div class="container col-md-9 form-group">-->
                    <div class="container col-md-9">
                        <select class="form-control"
                                ng-model="certificateType" ng-init="certificateType = certificateTypes[0].value">
                            <option ng-repeat="ct in certificateTypes" value="{{ct.value}}">{{ct.type}}</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>证件号码：
                    </label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" ng-model="number" placeholder="证件号码"/>
                    </div>
                </div><br>
                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>请输入支付密码：
                    </label>
                    <div class="col-md-9">
                        <input type="password" class="form-control" ng-model="firstPassword" placeholder="请输入支付密码"/>
                    </div>
                </div><br>
                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>请确认支付密码：
                    </label>
                    <div class="col-md-9">
                        <input type="password" class="form-control" ng-model="againPassword" placeholder="请确认支付密码" ng-blur="check()"/>
                    </div>
                </div>
                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>手机号码：
                    </label>
                    <div class="col-md-9">
                        <input type="tel" class="form-control" ng-model="TUser.uk_phone" ng-blur="checkPhone()" placeholder="手机号码"/>
                    </div>
                    <span ng-if="checkData.phoneCheck=='e'" style="color: red" class="col-md-offset-6">号码格式错误</span>
                </div>

                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>手机验证码：
                    </label>
                    <div class="col-md-5">
                        <input type="text" class="form-control" ng-model="phoneCAPTCHA" placeholder="手机验证码"/>
                    </div>
                    <div class="col-md-4">
                        <button type="button" class="btn btn-primary form-control" ng-disabled="isDisable" ng-click="getCode()">{{text}}</button>
                    </div>
                </div>
                <!--验证码-->
                <div>
                    <label class="col-md-3 control-label">
                        <span style="color: red">*</span>附加码：
                    </label>
                    <!--<div class="col-md-5">
                        <input type="text" class="form-control" ng-model="CAPTCHA"/>
                    </div>-->
                    <div class="input-group col-md-9" ng-init="showCAPTCHA()">
                        <div class="col-md-5">
                            <input type="text"id="yzm" value="" class="form-control" ng-model="CAPTCHA"
                                   placeholder="请输入验证码（不区分大小写）" class="input-val" style="width: 80%">&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>
                            <canvas id="canvas" width="100" height="30" ></canvas>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="form-group">
                        <button type="button" class="btn btn-primary form-control" value="下一步" ng-click="next()">开户
                        </button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary form-control" value="取消" ng-click="cancel()">取消
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="panel-footer">
            <span>深圳知领互联</span>
        </div>

    </div>


</div>

</body>
</html>